<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>message</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/message.css">
</head>
<body>
        <div class="head">
                <span class="title">在线驾考模拟系统</span>
                <ul>
                    <li><a href="send_my_message.html">发布留言</a></li>
                </ul>      
            </div>
        
            <div class="nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="order_exercise.html">顺序练题</a></li>
                    <li><a href="error_book.html">错题本</a></li>
                    <li><a href="mock_exam.html">模拟测试</a></li>
                    <li><a href="message.html">留言板</a></li>
                </ul>
            </div>

            <div class="content">
                <div class="message_h1">
                    <h1>留言区</h1>
                </div>
                <ul id="message_list">
                </ul>            
            </div>
            <script src="js/jquery-3.1.1.min.js"></script>
            <script>
              var msgArr = JSON.parse(localStorage.getItem('msgList')) || {}
              console.log(msgArr)
              var str = ''
              msgArr.data.forEach(ele => {
                  const {title, content} = {...ele}
                  str += temple(title, content)
              });
              $('#message_list').html(str)
              function temple(title, content) {
                return `<li>
                    <p class="message_title">${title}</p>
                    <p class="message_content">${content}</p>
                </li>`
              }
            function request() {
                $.ajax({
                    url: "/api/bbs/queryBbs",           
                    dataType: "json",
                    async: "true",
                    method: "GET",
                    success:function(data) {
                        console.log(data)
                        if(data.status === 'success'){
                        console.log(typeof data.data)
                        }                                   
                    },               
                    error:function(e){
                        console.log(e)
                    }
                            
                }) 
            }
            </script>
</body>
</html>